

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /**
         * 把平铺的数组结构转成树形结构
         */
        // [
        //   { 'id': '29', 'pid': '',     'name': '总裁办' },
        //   { 'id': '2c', 'pid': '',     'name': '财务部' },
        //   { 'id': '2d', 'pid': '2c', 'name': '财务核算部'},
        //   { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'},
        //   { 'id': 'd2', 'pid': '',     'name': '技术部'},
        //   { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部'}
        // ]
        // 树形结构的数据如下
        // [
        //   { 'id': '29', 'pid': '',     'name': '总裁办' },
        //   { 'id': '2c', 'pid': '',     'name': '财务部',children:[   { 'id': '2d', 'pid': '2c', 'name': '财务核算部'},{ 'id': '2f', 'pid': '2c', 'name': '薪资管理部'},] },
        //   { 'id': 'd2', 'pid': '',     'name': '技术部',children:[  { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部'}, { 'id': '2g', 'pid': 'd2', 'name': 'Python研发部'},]},
        // ]

        

        // 函数版: 为了方便复用
        function transDataToTreeData(arr) {
        // 需求；把平铺的数组结构转成树形结构
        // 步骤：
        // 1. 遍历数组中的对象，给每一个对象添加children树形，值默认是空数组

        const mapObj = {} // 映射对象, 方便根据数据的关系找数据
        arr.forEach(item => {
          console.log(item, 'item')
          if(!item.children) {
            item.children = []
          }
          // 2. 往映射对象添加数据: 取出每一个 item 对象的 id 作为映射对象的 key, 值就是当前的 item 对象
          mapObj[item.id] = item
        })
        console.log(mapObj, 'mapObj')
        // 3. 具体实现树形数据的转化
        const new_arr = []
        arr.forEach(item => {
          // 根据数据的父子级关系, 找到父级的数据
          const parent = mapObj[item.pid]
          // parent 如果是 undefind, 就说明 item 没有父级是一级的数据
          // parent 如果有值, 就说明 item 是一个二级数据或者三级数据, parent 保存的是父级对象
          if (parent) {
            parent.children.push(item)
          } else {
          // parent 如果是 undefind, 就说明 item 没有父级是一级的数据
          new_arr.push(item)
          }
        })
        return new_arr
        }
        
        const arr =  [
            { 'id': '29', 'pid': '',     'name': '总裁办' },
            { 'id': '2c', 'pid': '',     'name': '财务部' },
            { 'id': '2d', 'pid': '2c', 'name': '财务核算部'},
            { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'},
            { 'id': 'd2', 'pid': '',     'name': '技术部'},
            { 'id': 'd3', 'pid': 'd2', 'name': 'Java研发部'},
            { 'id': '2g', 'pid': 'd2', 'name': 'Python研发部'},
          ]
        transDataToTreeData(arr)
    </script>
</head>
<body>
    
</body>
</html>